<template>
    <div>
         <el-form-item label="商品规格">
            <div class="tip">最多添加3个商品规格</div>            
            <div class="prop" v-for="(prop,propIndex) in skuPropList" :key="propIndex">
                <div class="prop__header">
                    <div>
                    <el-select size="mini" clearable v-model="prop.propType" filterable @change="handleChangePropType(prop)">
                        <el-option v-for="(item,itemIndex) in validPropTypeOptions(prop)" :key="itemIndex" :label="item.title" :value="item.title"></el-option>
                    </el-select>
                    &nbsp;&nbsp;
                    <el-button type="text" @click="handleShowAddSkuPropDialog">添加规格类型</el-button>
                    </div>

                    
                    
                    <div>
                        <el-button @click="handleRemoveProp(propIndex)" type="text">删除规格</el-button>
                    </div>
                </div>
                <div class="prop__content" v-if="prop.propType">
                    <vuedraggable tag="ul" @end="calcSkuList" class="vue-draggable" v-model="prop.propNameList" draggable=".draggable-item">
                        <li 
                            v-for="(item,itemIndex) in prop.propNameList" 
                            :key="item+itemIndex"
                            class="draggable-item"
                            >
                            <span>{{item}}</span>
                            <i class="el-icon-error" @click="handleRemoveRule(prop,itemIndex)"></i>
                        </li>
                    </vuedraggable>
                    <div>
                        <el-input @keypress.native.enter="handleAddRule(prop)" clearable v-model="prop.propName" placeholder="请输入规格名称" size="mini" style="width:130px"></el-input>
                        <el-button @click="handleAddRule(prop)" type="text" style="margin-left:15px">添加</el-button>
                    </div>
                </div>
            </div>
            <el-button v-if="skuPropList.length<3" @click="handleAddSkuProp" icon="el-icon-plus" size="mini">添加规格</el-button>
         </el-form-item>
         <el-form-item label="价格与库存">
             <div class="price-stock">
                 <div style="padding-bottom:16px" v-if="batchSettingList.length > 0">
                    <div class="flex">
                        <div style="padding-right:15px">批量设置</div>
                        <div class="flex-con" style="font-size:12px;color:#999">在下方栏中选择内容进行批量填充</div>
                        <div>
                            <el-button :disabled="!batchSettingValided" @click="handleBatchSetting" size="mini" type="primary">确定</el-button>
                        </div>
                    </div>    
                    <div class="flex">
                        <div v-for="(item,itemIndex) in batchSettingList" :key="itemIndex" class="batch-setting-item">
                            <el-select size="mini" style="width:110px;margin-right:10px;" v-if="item.options" v-model="item.value" :placeholder="item.title">
                                <el-option v-for="o in item.options" :key="o" :value="o" :label="o"></el-option>
                            </el-select>
                            <input v-else-if="item.type==1" class="setting-input" @keydown="handleLimitInteger" type="text" :placeholder="item.title" v-model="item.value">
                            <template v-else-if="item.type==6 && isEdit">
                                <div class="stock-btns">
                                    <div class="stock-btn" @click="item.addFlag=1" :class="{'stock-btn--active':item.addFlag==1}">增</div>
                                    <div class="stock-btn" @click="item.addFlag=0" :class="{'stock-btn--active':item.addFlag==0}">减</div>
                                </div>
                                <input 
                                    style="padding-left:60px"
                                    class="setting-input"
                                    @keydown="handleLimitInteger" 
                                    type="text" 
                                    :placeholder="item.title" 
                                    v-model="item.value"
                                >
                            </template>
                            <input v-else-if="item.type==6" class="setting-input" @keydown="handleLimitInteger" type="text" :placeholder="item.title" v-model="item.value">
                            <input v-else-if="item.type==2" class="setting-input" @keydown="handleLimitFloat" type="text" :placeholder="item.title" v-model="item.value">
                            <input v-else-if="item.type==3" class="setting-input" type="text" :placeholder="item.title" v-model="item.value">
                        </div>
                    </div> 
                 </div>
                 <table>
                     <thead>
                         <tr>
                             <template v-for="titleItem in skuListTitleComputed" >
                                 <th v-if="!titleItem.isEdit || isEdit" :key="titleItem.title" style="white-space:nowrap" :style="titleItem.type>0?'width:100px':''">
                                    <i v-if="titleItem.required" class="required"></i>{{titleItem.title}}
                                </th>
                             </template>
                         </tr>
                     </thead>
                     <tbody>    
                         <tr v-for="(skuProps,skuPropIndex) in skuListComputed" :key="skuPropIndex">
                             <template v-for="(sku,skuIndex) in skuProps">
                                 <td v-if="sku.rowSpan > 0 && (!sku.isEdit || isEdit )" :rowspan="sku.rowSpan" :key="skuIndex">
                                    <input v-if="sku.type==3" type="text" v-model="sku.value">   
                                    <input v-else-if="sku.type==1" type="text" @keydown="handleLimitInteger" v-model="sku.value">   
                                    <template v-else-if="sku.type==6 && isEdit">
                                        <div class="stock-btns" style="margin-right:0">
                                            <div class="stock-btn" @click="sku.addFlag=1" :class="{'stock-btn--active':sku.addFlag==1}">增</div>
                                            <div class="stock-btn" @click="sku.addFlag=0" :class="{'stock-btn--active':sku.addFlag==0}">减</div>
                                        </div>
                                        <input 
                                            style="padding-left:60px"
                                            @keydown="handleLimitInteger" 
                                            type="text" 
                                            v-model="sku.value"
                                        >
                                    </template>
                                    <input v-else-if="sku.type==6" type="text" @keydown="handleLimitInteger" v-model="sku.value">   
                                    <input v-else-if="sku.type==2" type="text" @keydown="handleLimitFloat" v-model="sku.value">                                
                                    <span v-else-if="sku.type==0">{{sku.value}}</span>
                                    <div v-else-if="sku.type==4" class="sku-cover">
                                        <el-upload
                                            class="avatar-uploader"
                                            :action="UPLOAD_URL"
                                            :headers="getHeaders()"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccess.bind(this,sku)"
                                            :before-upload="beforeAvatarUpload">
                                            <img v-if="sku.value" :src="sku.value" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </div>
                                    <!-- <div v-else-if="sku.type==5" class="sku-status">
                                        <div>{{sku.value | statusFilter}}</div>
                                        <div class="sku-status__btn" @click="handleOffline(sku)" v-if="sku.value==1">下架</div>
                                        <div class="sku-status__btn" @click="handleOnline(sku)" v-else-if="sku.value==0">上架</div>
                                    </div> -->
                                </td>
                             </template>
                         </tr>
                     </tbody>
                 </table>
                 <div v-if="errmsg" class="errmsg-tip">{{errmsg}}</div>
             </div>
         </el-form-item>
         <el-dialog title="添加规格类型" :visible.sync="addSkuPropDialogShowed" width="420px" append-to-body>
             <el-form :disabled="isSubmiting" :rules="skuPropsTypeRules" :model="skuPropsTypeForm" label-width="120px" ref="form4SkuPropsTypes">
                 <el-form-item label="规格类型名称" prop="propsName">
                     <el-input v-model="skuPropsTypeForm.propsName" placeholder="请输入规格类型名称"></el-input>
                 </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
                <el-button type="default" @click="addSkuPropDialogShowed=false">取消</el-button>    
                <el-button type="primary" :loading="isSubmiting" @click="handleSaveSkuPropType">保存提交</el-button>    
             </div>
         </el-dialog>
    </div>
</template>

<script>
import vuedraggable from 'vuedraggable';
import * as apiObj from "@/api/goodsPropsSettings";
export default {
    components: { vuedraggable },
    computed:{
        batchSettingValided(){
            return this.batchSettingList.filter(el=>!el.options && el.value.trim()).length > 0;
        },
        skuListTitleComputed(){
            return this.skuListTitle.length > 0 ? this.skuListTitle : this.defaultSkuListTitle;
        },
        skuListComputed(){
            return this.skuList.length > 0 ? this.skuList : this.defaultSkuList;
        }
    },
    watch:{
        value(){
            this.initData();
        }
    },
    data(){
        return {
            isSubmiting:false,
            skuPropsTypeForm:{
                propsName:''
            },
            skuPropsTypeRules:{
                propsName:[
                    {
                        required:true,
                        trigger:'blur',
                        message:'请输入规格类型名称'
                    },
                    {
                        validator:(rule,value,callback)=>{
                            if(!value.trim()) {
                                return callback(new Error('规格类型名称不能为空'));
                            }
                            if(this.skuPropTypeOptions.some(el=>el.title == value.trim())){
                                return callback(new Error('规格类型名称已存在'));
                            }
                            callback();
                        },
                        trigger:'change'
                    }
                ]
            },
            errmsg:'',
            isEdit:false,
            addSkuPropDialogShowed:false,
            defaultSkuListTitle:[
                {
                    title:'当前库存',
                    value:'',
                    isEdit:true,
                    type:0, // 当前库存
                },
                {
                    title:'库存',
                    value:'',
                    type:6, //  integer , 6 特别类型,修改模式是，6，新增模式是 1
                    addFlag:1,
                    required:true
                },
                {
                    title:'价格(¥)',
                    value:'',
                    type:2,
                    required:true
                },
                // {
                //     title:'会员价(¥)',
                //     value:'',
                //     type:2,
                //     required:true
                // },
                // {
                //     title:'重量(g)',
                //     value:'',
                //     type:1,
                //     required:true
                // },
                // {
                //     title:'sku编码',
                //     value:'',
                //     type:3
                // }
            ],
            defaultSkuList:[
                [                    
                    {
                        field:'stockNum',
                        value:'',
                        isEdit:true,
                        rowSpan:1,
                        type:0 // static
                    },
                    {
                        field:'stockNum',
                        value:'',
                        addFlag:1,
                        rowSpan:1,
                        type:6 // integer , 6 特别类型,修改模式是，6，新增模式是 1
                    },
                    {
                        field:'salePrice', //价格
                        value:'',
                        rowSpan:1,
                        type:2 // float类型
                    },
                    // {
                    //     field:'member_price', //价格
                    //     value:'',
                    //     rowSpan:1,
                    //     type:2 // float类型
                    // },
                    // {
                    //     field:'weight', // 重量
                    //     value:'',
                    //     rowSpan:1,
                    //     type:1 // int类型
                    // },
                    // {
                    //     field:'goods_no', //sku编码
                    //     value:'',
                    //     rowSpan:1,
                    //     type:3 // text类型
                    // }
                ]
            ],
            // 批量设置
            batchSettingList:[],
            skuListTitle:[
                // {
                //     title:'颜色'
                // },
                // {
                //     title:'库存',
                //     required:true
                // },
                // {
                //     title:'价格',
                //     required:true
                // },
                // {
                //     title:'sku编码'
                // }
            ],
            skuList:[
                // [
                //     {
                //         value:'红色',
                //         rowSpan:1,
                //         type:0 // 静态类型
                //     },
                //     {
                //         field:'stock',
                //         value:'',
                //         rowSpan:1,
                //         type:1 // integer
                //     },
                //     {
                //         field:'price', //价格
                //         value:'',
                //         rowSpan:1,
                //         type:2 // float类型
                //     },
                //     {
                //         field:'goods_no', //sku编码
                //         value:'',
                //         rowSpan:1,
                //         type:3 // text类型
                //     }
                // ],
                // [
                //     {
                //         value:'白色',
                //         rowSpan:1,
                //         type:0 // 静态类型
                //     },
                //     {
                //         field:'stock',
                //         value:'',
                //         rowSpan:1,
                //         type:1 // integer
                //     },
                //     {
                //         field:'price', //价格
                //         value:'',
                //         rowSpan:1,
                //         type:2 // float类型
                //     },
                //     {
                //         field:'goods_no', //sku编码
                //         value:'',
                //         rowSpan:1,
                //         type:3 // text类型
                //     }
                // ]
            ], // 商品规格
            skuPropList:[],
            skuPropTypeOptions:[]
        };
    },
    filters:{
        statusFilter(status){
            return status ? '已上架':'已下架'
        }
    },
    created(){
        this.$service.goodsSalePros.listAll().then(data=>{
            this.skuPropTypeOptions = data || [];
        });
        this.initData(); 
    },
    props:{
        value:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    methods:{
        handleShowAddSkuPropDialog(){
            this.skuPropsTypeForm.propsName = '';
            this.addSkuPropDialogShowed = true;
        },
        handleOffline(sku){
            sku.value = 0;
        },
        handleOnline(sku){
            sku.value = 1;
        },
        reset(){
            this.skuListTitle = [];
            this.skuList = [];
            this.skuPropList = [];
            this.defaultSkuListTitle.forEach(el=>{
                el.value = '';
            });
            this.defaultSkuList[0].forEach(el=>{
                el.value = '';
            });
            this.fieldValueMap = {};       
            this.batchSettingList = [];
        },
        // getFieldType(fieldname){
        //     if(fieldname == 'cover') {
        //         return 4; // 上传
        //     } else if(fieldname == 'stock' || fieldname == 'weight') {
        //         return 1; // integer
        //     } else if(fieldname == 'price' || fieldname == 'member_price' ){
        //         return 2; // float
        //     } else {
        //         return 3; // text
        //     }
        // },
        // 一维数组转换到二维数组
        initData(){
            this.reset();
            if(this.value && this.value.length > 0) {
                // for edit
                this.isEdit = true;
                let hasSku = false;
                const skuPropTypeValueMap = {};
                for(const sku of this.value) {
                    if(sku.skuProps) {                        
                        const salePros = JSON.parse(sku.skuProps);
                        const saleProTypes = Object.keys(salePros);
                        if(saleProTypes.length > 0) {
                            saleProTypes.forEach(t=>{
                                skuPropTypeValueMap[t] = skuPropTypeValueMap[t] || [];
                                const value = salePros[t];
                                if(!skuPropTypeValueMap[t].includes(value)){
                                    skuPropTypeValueMap[t].push(value);
                                }
                            });
                            hasSku = true;
                            const saleProTypeValues = Object.values(salePros);                            
                            const key = saleProTypeValues.join('-');
                            this.fieldValueMap[key] = saleProTypeValues.map(el=>({
                                type:0,
                                value:el
                            }));
                            this.defaultSkuList[0].forEach(({field,type,addFlag}) => {
                                const item = {
                                    value:sku[field],
                                    rowSpan:1,
                                    field,
                                    type
                                };
                                if(addFlag !== undefined) {
                                    item.addFlag = addFlag;
                                    item.value = '';
                                }
                                this.fieldValueMap[key].push(item);
                            });
                            this.fieldValueMap[key].push({
                                field:'skuImg',
                                rowSpan:1,
                                type:4,
                                value:sku.skuImg
                            });
                            // if(this.isEdit){
                            //     this.fieldValueMap[key].push({
                            //         field:'status',
                            //         rowSpan:1,
                            //         type:5,
                            //         value:sku.status
                            //     });
                            // }
                        }
                    }
                }
                if(hasSku) {                    
                    Object.keys(skuPropTypeValueMap).forEach(el=>{
                        this.skuPropList.push({
                            propType:el,
                            propNameList:skuPropTypeValueMap[el],
                            propName:''
                        });
                    });
                    this.calcSkuList();
                } else {
                    // 计算默认值
                    const sku = this.value[0]; // object
                    this.defaultSkuList[0].forEach(el=>{
                        if(el.type == 6 && this.isEdit) {
                            el.value = '';
                        } else {
                            el.value = sku[el.field];
                        }                        
                    });
                }
            } else {
                // for add
                this.isEdit = false;
            }
        },
        handleBatchSetting(){
            this.skuList.forEach(el=>{ // is array
                let foundedIndex = -1;
                for(let i=0;i<this.batchSettingList.length;i++){
                    const setting = this.batchSettingList[i];
                    if(!setting.options || !setting.options.length){
                        foundedIndex = i;
                        break;
                    }
                    if(setting.value != '全部' && setting.value != el[i].value) {
                        break;
                    }
                }
                if(foundedIndex > - 1){ // 计算后面的
                    for(let i=foundedIndex;i<this.batchSettingList.length;i++){
                        const setting = this.batchSettingList[i];
                        if(setting.value){
                            el[i].value = setting.value;
                            if(setting.addFlag != undefined) {
                                el[i].addFlag = setting.addFlag; 
                            }
                        }
                    }
                }
            });
        },
        handleChangePropType(prop){
            if(prop.propNameList.length > 0) {
                prop.propNameList = [];
                this.fieldValueMap = {};
            }
            this.calcSkuList();
        },
        validPropTypeOptions(exceptProp){
            const usedSkuPropList = this.skuPropList.filter(el=>el.propType && el.propType != exceptProp.propType).map(el=>el.propType);
            const results = this.skuPropTypeOptions.filter(el=>!usedSkuPropList.includes(el.title));
            console.log("!@#!@#",results)
            return results;
        },
        handleSaveSkuPropType(){
            this.$refs.form4SkuPropsTypes.validate(v=>{
                if(v){
                    this.skuPropsTypeForm.propsName = this.skuPropsTypeForm.propsName.trim();
                    apiObj.create(this.skuPropsTypeForm).then(() => {
                        this.addSkuPropDialogShowed = false;
                        this.skuPropTypeOptions.unshift({
                            title:this.skuPropsTypeForm.propsName
                        });
                        this.$message({
                            showClose: true,
                            message: "添加成功",
                            type: "success"
                        });
                    })
                    .catch(() => {

                    });
                }
            })
        },
        handleLimitInteger(e){
            const key = e.key;
            if(!/[0-9]/.test(key) && key!='Tab' && key!='Backspace' && !e.metaKey && key!='ArrowLeft' && key!='ArrowRight') {
                e.preventDefault();
            }
        },
        handleLimitFloat(e){
            const key = e.key;
            const value = e.target.value;
            // console.log(key);
            if(isNaN(value +'' + key) && key!='Tab' && key!='Backspace' && !e.metaKey && key!='ArrowLeft' && key!='ArrowRight') {
                e.preventDefault();
            }
        },
        handleAddSkuProp(){
            this.skuPropList.push({
                propType:'',
                propNameList:[],
                propName:''
            });
        },
        handleRemoveProp(index){
            if ( this.skuPropList[index].propNameList.length > 0 ){
                this.confirm('删除该规格后，当前的规格相关数据将丢失，确认要删除吗？').then(r=>{
                    if(r){
                        this.skuPropList.splice(index,1);
                        this.calcSkuList();
                    }
                });
            } else {
                this.skuPropList.splice(index,1);
            }
        },
        calcSkuList(){
            const skuPropList = this.skuPropList.filter(el=>el.propType && el.propNameList.length) || [];
            if(skuPropList.length) {
                const propTypes = skuPropList.map(el=>({title:el.propType}));
                this.skuListTitle = propTypes.concat(this.defaultSkuListTitle,{title:'预览图',required:true});
                // if(this.isEdit) {
                //     this.skuListTitle.push({
                //         title:'状态'
                //     });
                // }
                this.batchSettingList = skuPropList.map(el=>({title:el.propType,options:['全部'].concat(el.propNameList),value:'全部'})).concat(this.defaultSkuListTitle);
                const skuList = [];
                const rowsCount = skuPropList.reduce((a,b)=>a*b.propNameList.length,1);
                for(let i=0;i<rowsCount;i++){
                    skuList.push([]); // 初始化
                }
                let groupCount = 1; // 按分類種類數量分組
                for(let i=0; i < skuPropList.length; i++) {
                    const propNameList = skuPropList[i].propNameList;
                    const rowSpan = rowsCount / propNameList.length / groupCount;
                    const groupSize = rowsCount / groupCount;
                    for(let g=0 ; g < groupCount ; g++){
                        for(let j=0; j < propNameList.length ; j ++) {
                            for(let k = 0; k < rowSpan;k++){
                                skuList[groupSize * g + j * rowSpan + k][i] = {
                                    value:propNameList[j],
                                    rowSpan:k === 0 ? rowSpan : 0,
                                    type:0
                                };
                            }
                        }
                    }
                    groupCount *= propNameList.length;
                }            
                for(let i=0;i<skuList.length;i++) { // 二维数组
                    const key = skuList[i].map(el => el.value).join('-');   
                    if(this.fieldValueMap[key]) {
                        const prevSku = this.fieldValueMap[key]; // 一维数组
                        // rowSpan 需要合并
                        skuList[i].forEach((el,index) => {
                            prevSku[index].rowSpan = el.rowSpan;
                        });
                        skuList[i] = prevSku;
                        continue;
                    } else {
                        const skuItem = skuList[i].concat(this.defaultSkuList[0].map(el=>Object.assign({},el,{value:el.field == 'stockNum' && el.type ==0 ? 0:''})),{
                            rowSpan:1,
                            field:'skuImg',
                            value:'',
                            type:4 // 上傳圖片
                        });
                        // if(this.isEdit) {
                        //     skuItem.push({
                        //         rowSpan:1,
                        //         field:'status',
                        //         value:1,
                        //         type:5 // 当前状态
                        //     });
                        // }
                        skuList[i] = skuItem;
                        this.fieldValueMap[key] = skuList[i]; // 一维数组
                    }
                }
                this.skuList = skuList;
            } else {
                this.skuListTitle = [];
                this.skuList = [];
            }
        },
        valid(){
            let errmsg = '';
            this.skuListComputed.every(el=>{
                const skuProps = {};
                let skuStock = 0;
                el.every((c,i)=>{
                    if(!c.field){ // sku type
                        skuProps[this.skuListTitleComputed[i].title] = c.value;
                    } else {
                        if(this.skuListTitleComputed[i].required && !c.value && (!this.isEdit || c.type != 6)){ // stock 编辑的时候可以为空
                            errmsg = (Object.keys(skuProps).length ? JSON.stringify(skuProps) + ':' : '') + this.skuListTitleComputed[i].title + '不能为空';
                            return false;
                        } else if(c.field == 'stockNum' && c.type == 0) {
                            skuStock = parseInt(c.value);
                        } else if(c.type == 6) {
                            if(c.addFlag == 0 && c.value > skuStock) { // 减库存
                                errmsg = (Object.keys(skuProps).length ? JSON.stringify(skuProps) + ':' : '') + this.skuListTitleComputed[i].title + '不能小于0';
                                return false;
                            }
                        }
                    }
                    return true;
                });
                if(errmsg){
                    return false;
                }
                return true;
            });

            if(errmsg){
                this.errmsg = errmsg;
                return false;
            } else {
                this.errmsg = '';
            }
            return true;
        },
        getData(){
            // 二维数组，转为一维数组
            const results = [];
            const goodsProps = {};
            this.skuListComputed.forEach(el=>{
                const item = {};
                const skuProps = {};
                el.forEach((c,i)=>{
                    if(!c.field){ // sku type
                        const title = this.skuListTitleComputed[i].title;
                        skuProps[title] = c.value;
                        goodsProps[title] = goodsProps[title] || []; 
                        if(!goodsProps[title].includes(c.value)){
                            goodsProps[title].push(c.value);
                        }
                    } else {
                        if(!this.skuListTitleComputed[i].required && !c.value) {
                            return;
                        }
                        if(c.type == 1 || c.type == 5){ // for integer
                            item[c.field] = parseInt(c.value) || 0;
                        } else if(c.type == 2) { // for float
                            item[c.field] = parseFloat(c.value);
                        } else if(c.type == 6)  {                            
                            if(this.isEdit){
                                if(c.field == 'stockNum') {
                                    item['stockModifyNum'] = parseInt(c.value) || 0;
                                } else {
                                    item[c.field] = parseInt(c.value) || 0;
                                }
                                item.addFlag = c.addFlag;
                            } else {
                                item[c.field] = parseInt(c.value) || 0;
                            }
                        } else  {
                            item[c.field] = c.value;
                        }
                    }
                });
                if(Object.keys(skuProps).length > 0){
                    item.skuProps = JSON.stringify(skuProps);
                } else {
                    item.skuProps = '{}';
                }
                results.push(item);
            });
            return {
                skuList:results,
                goodsProps:JSON.stringify(goodsProps)
            };
        },
        handleAvatarSuccess(prop, res, file) {
            if (res.code === 200) {
                prop.value = this.imgUrl(res.data);
            } else {
                this.$message.error(res.msg);
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        handleRemoveRule(prop,index){
            prop.propNameList.splice(index,1);
            if(prop.propNameList.length == 0) {
                this.fieldValueMap = {};
            }
            this.calcSkuList();
        },
        handleAddRule(prop){
            if(prop.propName.trim() == '') {
                this.showError('规格名称不能为空');
                return;
            }
            if(!prop.propNameList.includes(prop.propName.trim())){
                prop.propNameList.push(prop.propName.trim());
                prop.propName = '';
                if(prop.propNameList.length == 1) {
                    this.fieldValueMap = {};
                }
                this.calcSkuList();
            } else {
                this.showError('规格名称已存在');
                return;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.prop{
    margin-bottom: 10px;
}
.errmsg-tip{
    color:#F56C6C;
    font-size: 12px;
}
.prop__content{
    padding:10px;
    background: #fafafa;
}
.prop__header{
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f5f9;
}
.vue-draggable{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .draggable-item{
        margin-bottom: 10px;
        position: relative;
        background-color: #fff;
        width: 100px;
        padding: 7px 10px;
        border-radius: 4px;
        border:1px solid #eee;
        font-size: 12px;
        line-height: 1;
        margin-right: 15px;
        span{
            text-overflow: ellipsis;   
            display: block;
            overflow: hidden;
            width: 100px;
            white-space: nowrap;
        }
        .el-icon-error{
            display: none;
            position: absolute;
            color: red;
            right: -8px;
            top: -8px;
            font-size: 16px;
        }
        &:hover{
            .el-icon-error{
                display: block;
            }            
        }
    }
}
.sku-status{
    width:70px;
    padding: 0 10px;
}
.sku-status__btn{
    color:#409EFF;
    margin-top: 0.5rem;
    cursor: pointer;
}
.price-stock{
    background-color: #f9f9f9;
    padding:15px;
    table{
        width: 100%;
        border-collapse: collapse;
        td,th{
            border:1px solid #eee;
            font-size: 12px;
            text-align: left;
            padding:15px 10px;
            line-height: 1;
        }
        td{
            padding: 0;            
            span{
                padding:20px 10px;
            }
            position: relative;
        }
        thead{
            background-color: #f7f7f7;
        }
        tbody{
            background-color: #fff;
            input{
                font-size: 12px;
                display: block;
                box-sizing: border-box;
                width: 100%;
                box-sizing: border-box;
                padding:20px 10px;
                border:1px solid transparent;
                &:hover{
                    border-color: #4b97de;
                }
                &:focus{
                    border-color: lightblue;
                }
            }            
        }
    }
    
}
.setting-input{
    width: 110px;
    margin-right: 10px;
    border-radius: 4px;
    border:1px solid #dfdfdf;
    // padding: 6px;
    background-color: #fff;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.batch-setting-item{
    line-height: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
i.required::before{
    display: inline;
    padding-right: 4px;
    content: '*';
    color: red;
}
.avatar-uploader{
     width: 45px;
    height: 45px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}
.avatar {
    width: 45px;
    height: 45px;
    display: block;
}
.sku-cover{
    display: flex;
    align-items: center;
    padding:0 10px; 
}
.stock-btns{
    display: flex;
    flex-direction: row;
    margin-right: 5px;
    font-size: 12px;
    position: absolute;
    left:10px;
    top:50%;
    transform: translateY(-50%);
    border:1px solid #454a5f;
    border-radius: 2px;
}
.stock-btn{
    text-align: center;
    cursor: pointer;
    width: 21px;
    line-height: 20px;
    user-select: none;
} 
.stock-btn--active{
    background-color: #454a5f;
    color: #fff;
}
</style>
